﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>列表页面</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-table/1.10.1/bootstrap-table.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.3.11/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/Areas/PawRoot/assets/css/common.css" rel="stylesheet" />
    <script src="//cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="/Areas/PawRoot/assets/js/common.min.js"></script>
    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <header class="panel panel-default">
        <div class="panel-heading">条件查询</div>
        <article class="panel-body">
            @RenderBody()
        </article>
    </header>
    <footer class="panel panel-default">
        <div class="panel-heading">数据列表</div>
        <article class="panel-body">
            <div id="lotToolbar" class="btn-group">
                <button type="button" class="btn btn-default" id="lotadd"><i class="glyphicon glyphicon-plus"></i></button>
                <button type="button" class="btn btn-default" id="lotrerecover"><i class="glyphicon glyphicon-share-alt"></i></button>
                <button type="button" class="btn btn-default" id="lotremove"><i class="glyphicon glyphicon-trash"></i></button>
            </div>
            <table id="lotTable"></table>
        </article>
    </footer>
    <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.3.11/js/bootstrap-datetimepicker.min.js"></script>
    <script src="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.3.11/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-table/1.10.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="/Areas/PawRoot/assets/js/datapattern.js"></script>
    <script type="text/javascript">
        var lotTab = $('#lotTable');
        //初始化表格
        function initTable(columns) {
            lotTab.bootstrapTable({
                toolbar: '#lotToolbar',                     //自定工具
                method: 'post',                             //请求方式
                url: '@Url.Action("Query")',                //请求地址
                queryParams: queryParams,                   //传递参数
                height: 500,                                //表格高度
                pagination: true,                           //启用分页
                pageSize: 10,                               //每页条数
                pageList: [20, 50, 100, 200, 500],          //显示条数
                sidePagination: "server",                   //控件类型（默认是客户类型）
                //search: true,                               //启用搜索（后端模式下不建议开启搜索，有bug）
                //searchOnEnterKey: true,                     //回车搜索（后端模式下不建议开启搜索，有bug）
                //strictSearch: false,                        //精确搜索（默认模糊）
                showColumns: true,                          //内容选框
                showRefresh: true,                          //启用刷新
                clickToSelect: true,                        //单行选中
                showPaginationSwitch: true,                 //条数显示
                maintainSelected: true,                     //记住选中（分页或搜索时保留选中状态）
                striped: true,                              //隔行变色
                //escape: true,                               //转义HTML（不需要自己转义了）
                columns: columns,
                select: true
            });
        }

        //事件系列: http://jsfiddle.net/e3nk137y/2106/
        lotTab.on('load-error.bs.table', function (e, status) {
            showMsg('加载出错，刷新试试');
        });

        //时间控件
        $(function () {
            $('.lot-time').datetimepicker({
                format: "yyyy-mm-dd hh:mm",
                todayBtn: "linked",
                language: "zh-CN",
                autoclose: true
            }).on('changeDate', function (ev) {
                var startTime = $('#startTime').val();
                $('#endTime').datetimepicker('setStartDate', startTime);
            });
        });

        //查询参数
        function queryParams(params) {
            return getArray(params.limit, params.offset, params.search, params.sort + ' ' + params.order);
        }

        //格式化时间
        function getDate(value) {
            return new Date(value).pattern("yyyy-MM-dd hh:mm:ss");
        }

        //返回键值对数组
        function getArray(pageSize, offset, title, order) {
            var startTime = $('#startTime').val().ticks();
            var endTime = $('#endTime').val().ticks();
            var dataStatus = $('#dataStatus').val();
            if (new Date(startTime) > new Date(endTime)) {
                showMsg("开始时间不能大于结束时间！", 500);
                return false;
            }
            if (!title) {
                title = $('#title').val();
            }
            if (!order) {
                order = " ";
            }
            return { PageSize: pageSize, Offset: offset, Title: title, StartTime: startTime, EndTime: endTime, DataStatus: dataStatus, OrderStr: order };
        }

        //条件查询
        $('#search').click(function () {
            $.post('@Url.Action("Query")', getArray(10, 0, $('#title').val()), function (data) {
                if (!data.Status) {
                    showMsg(data.Msg, 1000);
                }
                lotTab.bootstrapTable('removeAll');
                lotTab.bootstrapTable('load', JSON.parse(data));
            });
        });
        //重置
        $('#reset').click(function () {
            $('#title').val('');
            $('#startTime').val('');
            $('#endTime').val('');
        });
        //跳转到添加页面
        $('#lotadd').click(function () {
            window.location.href = '@Url.Action("Add")';
        });
        //批量更新系列
        //批量恢复
        $('#lotrerecover').click(function () {
            var ids = getSelectIds();
            if (ids) {
                updateData(ids, 1);
            }
        });
        //批量删除
        $('#lotremove').click(function () {
            var ids = getSelectIds();
            if (ids) {
                updateData(ids, 99);
            }
        });
        //批量更新数据
        function updateData(ids, status) {
            showYesNoMsg('确定批量操作？', function () {
                //更新数据库
                $.post('@Url.Action("UpdateList")', { ids: ids, status: status }, function (data) {
                    showMsg(data.Msg);
                    if (data.Status) {
                        //刷新表格
                        lotTab.bootstrapTable('refresh');
                    }
                });
            });
        }
    </script>
    @RenderSection("JsScript", false)
</body>
</html>